<template>
  <div>
    <Table :columns="columns" :data="tableData">
      <template slot-scope="{ row }" slot="states">
        <div v-if="row.contState == 0" class="state-cls state-cls-used">有效</div>
        <div v-if="row.contState == 3" class="state-cls state-cls-used">已复效</div>
        <div v-else-if="row.contState == 1" class="state-cls state-cls-no-used">失效</div>
        <div v-else-if="row.contState == 2" class="state-cls state-cls-end">终止</div>
      </template>
    </Table>
    <Page :total="5" show-total style="text-align:right;margin-top:20px" @on-change="handleCurrentChange"
      @on-page-size-change="handleSizeChange" :current="ipagination.index" :page-size="ipagination.pageSize" transfer>
    </Page>
  </div>
</template>

<script>
import { loadResourcesMixin } from "../../../util/mixins/loadResourcesMixin";
import { tableChangeMixin } from "../../../util/mixins/tableChangeMixin";
export default {
  name: "achievementModalTable",
  mixins: [loadResourcesMixin, tableChangeMixin],
  props: {
    row: Object,
  },
  data() {
    return {
      ipagination: {
        index: 1,
        // pageSize: 10,
        // pageSizeOptions: ['10', '20', '30', '100'],

        total: 0,
        // pageSizeOptions: [5],
        // index: 1,
        pageSize: 5,
      },
      tableData: [
        {
          "contno": "213202010573956",
          "riskcode": null,
          "riskname": null,
          "appentno": null,
          "appentname": null,
          "esPayCondition": null,
          "receivables": "10000.00",
          "contState": "0",
          "payDate": "2023-07-11",
          "cvaliDate": null
        },
        {
          "contno": "213202123689656",
          "riskcode": null,
          "riskname": null,
          "appentno": null,
          "appentname": null,
          "esPayCondition": null,
          "receivables": "10000.00",
          "contState": "0",
          "payDate": "2023-07-07",
          "cvaliDate": null
        },
        {
          "contno": "213202123690236",
          "riskcode": null,
          "riskname": null,
          "appentno": null,
          "appentname": null,
          "esPayCondition": null,
          "receivables": "10000.00",
          "contState": "0",
          "payDate": "2023-07-07",
          "cvaliDate": null
        },
        {
          "contno": "213202123690676",
          "riskcode": null,
          "riskname": null,
          "appentno": null,
          "appentname": null,
          "esPayCondition": null,
          "receivables": "10000.00",
          "contState": "0",
          "payDate": "2023-07-07",
          "cvaliDate": null
        },
        {
          "contno": "213202123698326",
          "riskcode": null,
          "riskname": null,
          "appentno": null,
          "appentname": null,
          "esPayCondition": null,
          "receivables": "10000.00",
          "contState": "0",
          "payDate": "2023-07-07",
          "cvaliDate": null
        }
      ],
      mixinData: {
        tableAxios: "ESUncollecte",
        disableMixinCreated: true,
      },
      columns: [
        {
          title: "序号",
          type: "index",
          align: "center",
          // width: "70",
        },
        {
          title: "保单号",
          key: "contno",
          align: "center",
          width: '170'
        },
        {
          title: "应交日",
          key: "payDate",
          align: "center",
        },
        {
          title: "应交保费",
          key: "receivables",
          align: "center",
        },
        {
          title: "保单状态",
          key: "contState",
          align: "center",
          slot: "states",
        },
      ],
    };
  },
  methods: {
    loadDataAfter() {
      this.$emit("historyModalE");
    },
  },
};
</script>

<style scoped>
.state-cls {
  width: 62px;
  height: 26px;
  border-radius: 2px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  line-height: 26px;
  text-align: center;
  margin: auto;
}

.state-cls-used {
  color: #14d595;
  background: rgba(20, 213, 149, 0.15);
}

.state-cls-no-used {
  background: #fff4ed;
  color: #f23031;
}

.state-cls-end {
  background: #eeeeee;
  color: #999999;
}
</style>